import React from 'react';
import PropTypes from 'prop-types';

/**
 * 基础按钮
 */
const Button = ({ primary, size, children, ...props }) => {
    const mode = primary ? 'mixed-button--primary' : 'mixed-button--secondary';
    return (
        <button
            type="button"
            className={['mixed-button', `mixed-button--${size}`, mode].join(' ')}
            {...props}
        >
            {children}
        </button>
    );
};

Button.propTypes = {
    /**
     * 类型
     */
    primary: PropTypes.bool,
    /**
     * What background color to use
     */
    backgroundColor: PropTypes.string,
    /**
     * How large should the button be?
     */
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
     * Button contents
     */
    label: PropTypes.string.isRequired,
    /**
     * Optional click handler
     */
    onClick: PropTypes.func,
};

Button.defaultProps = {
    backgroundColor: null,
    primary: false,
    size: 'medium',
    onClick: undefined,
};
export default Button;